import 'package:flutter/material.dart';
import 'package:love_app/common/su.dart';
import 'package:love_app/model/community_model.dart' as CTYModel;
import 'package:love_app/routes/application.dart';

// 根据图片数组长度返回不同布局ui
BuildContext _context;
class CommunityWarpImageUI extends StatelessWidget {
  final List<CTYModel.Pictures> imagesList; // 当前item拥有的图片
  final int itemId; // 当前item对应的id
  // final List<String> showImages; // 点击图片显示高清图片
  final String prividerType; // provider类型

  CommunityWarpImageUI({@required this.imagesList, @required this.itemId, @required this.prividerType});

  @override
  Widget build(BuildContext context) {
    _context = context;
    return _imageUI();
  }

  // 生成每一个item内容
  Widget _imageUI() {
    Widget widget;
    int imagesLength = this.imagesList.length;
    switch (imagesLength) {
      case 0:
        widget = _imagesLengthIs0();
        break;
      // case 1:
      //   widget = _imagesLengthIs1(); // 暂时先不处理一张和多张图片区别
      //   break;
      default:
        // 两张到九张使用warp样式
        widget = _imagesLengthIs2_9();
    }
    return widget;
  }

  // 数组长度为空的时候直接返回一个空容器
  Widget _imagesLengthIs0() {
    return Container();
  }

  // // 数组长度为1的时候布局
  // Widget _imagesLengthIs1() {
  //   dynamic item = this.imagesList.first;
  //   return Container(
  //     alignment: Alignment.centerLeft,
  //     padding: EdgeInsets.only(
  //       left: Su().w(13),
  //     ),
  //     child: InkWell(
  //       onTap: () {},
  //       child: Image.network(
  //         item.thumbnail,
  //         fit: BoxFit.fitHeight,
  //       ),
  //     ),
  //   );
  // }

  Widget _imagesLengthIs2_9() {
    return Container(
      width: Su().w(750),
      child: Wrap(
        spacing: Su().w(10), // 主轴(水平)方向间距
        runSpacing: Su().w(10), // 纵轴（垂直）方向间距
        alignment: WrapAlignment.start, //沿主轴方向居中
        crossAxisAlignment: WrapCrossAlignment.start, //
        children: _getWardChildren(),
      ),
    );
  }

  // 获取所有的warp布局内容
  List<Widget> _getWardChildren() {
    List<Widget> list = [];
    int index = 0;
    for (CTYModel.Pictures item in this.imagesList) {
      list.add(_imageItem(item, index));
      index++;
    }
    return list;
  }

  // 获取单独每个图片布局
  Widget _imageItem(CTYModel.Pictures item, int intIndex){
    String index = intIndex.toString();
    return InkWell(
      onTap: () {
        Application.router.navigateTo(_context, "/communityShowImageUI?itemId=$itemId&index=$index&prividerType=$prividerType");
      },
      child: Container(
        child: Image.network(
          item.thumbnail,
          fit: BoxFit.fitWidth,
          height: Su().w(173.6),
          width: Su().w(172.8),
        ),
      ),
    );
  }
}
